css中实现动画有两种方式：transition过渡动画、 animation自定义动画。transition是css3新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。之前：元素->元素:hover状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。过渡：从开始状态到结束状态的中间过程可以查看格式：transition:过渡的属性完成时间(s)运动曲线延迟时间transition:all3s(1s=1000ms)linear0s;transition包含以下四个属性：transition-property过渡属性。
多个元素的过渡点击打开视频讲解更加详细我们之后讨论多个组件的过渡，对于原生标签可以使用v-if/v-else。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：0">Sorry,noitemsfound.可以这样使用，但是有一点需要注意：当有相同标签名的元素切换时，需要通过keyattribute设置唯一的值来标记以让Vue区分它们，否则Vue为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在组件中的多个元素设置key是一个更好的实践。示例：SaveEdit在一些场景中，也可以通过给同一个元素的keyattribute设置不同的状态来代替v-if和v-else，上面的例子可
多个元素的过渡点击打开视频讲解更加详细我们之后讨论多个组件的过渡，对于原生标签可以使用v-if/v-else。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：0">Sorry,noitemsfound.可以这样使用，但是有一点需要注意：当有相同标签名的元素切换时，需要通过keyattribute设置唯一的值来标记以让Vue区分它们，否则Vue为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在组件中的多个元素设置key是一个更好的实践。示例：SaveEdit在一些场景中，也可以通过给同一个元素的keyattribute设置不同的状态来代替v-if和v-else，上面的例子可
显性的过渡持续时间点击打开视频讲解更加详细在很多情况下，Vue可以自动得出过渡效果的完成时机。默认情况下，Vue会等待其在过渡效果的根元素的第一个transitionend或animationend事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。在这种情况下你可以用组件上的durationprop定制一个显性的过渡持续时间(以毫秒计)：...你也可以定制进入和移出的持续时间：...完整案例：Togglerender组件上的durationprop定制一个显性的过渡持续时间(以毫秒计):durat
同时使用过渡和动画点击打开视频讲解更加详细Vue为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或animationend，这取决于给元素应用的CSS规则。如果你使用其中任何一种，Vue能自动识别类型并设置监听。但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，你就需要使用typeattribute并设置animation或transition来明确声明你需要Vue监听的类型。完整案例：Togglerenderhelloexportdefault{name:'
显性的过渡持续时间点击打开视频讲解更加详细在很多情况下，Vue可以自动得出过渡效果的完成时机。默认情况下，Vue会等待其在过渡效果的根元素的第一个transitionend或animationend事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。在这种情况下你可以用组件上的durationprop定制一个显性的过渡持续时间(以毫秒计)：...你也可以定制进入和移出的持续时间：...完整案例：Togglerender组件上的durationprop定制一个显性的过渡持续时间(以毫秒计):durat
同时使用过渡和动画点击打开视频讲解更加详细Vue为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或animationend，这取决于给元素应用的CSS规则。如果你使用其中任何一种，Vue能自动识别类型并设置监听。但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，你就需要使用typeattribute并设置animation或transition来明确声明你需要Vue监听的类型。完整案例：Togglerenderhelloexportdefault{name:'
自定义过渡的类名点击打开视频讲解更加详细我们可以通过以下attribute来自定义过渡类名：enter-classenter-active-classenter-to-class(2.1.8+)leave-classleave-active-classleave-to-class(2.1.8+)他们的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如Animate.css结合使用十分有用。首先安装Animate.cssnpminstallanimate.css--save在main.js中引入importVuefrom'vue'importAppfrom'./App.vu
自定义过渡的类名点击打开视频讲解更加详细我们可以通过以下attribute来自定义过渡类名：enter-classenter-active-classenter-to-class(2.1.8+)leave-classleave-active-classleave-to-class(2.1.8+)他们的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如Animate.css结合使用十分有用。首先安装Animate.cssnpminstallanimate.css--save在main.js中引入importVuefrom'vue'importAppfrom'./App.vu
JavaScript钩子点击打开视频讲解更加详细可以在attribute中声明JavaScript钩子完整案例：Togglerenderhelloexportdefault{name:'App',data(){return{show:true}},mounted(){},components:{},methods:{//--------//进入中//--------beforeEnter:function(el){console.log('beforeEnter')},//当与CSS结合使用时//回调函数done是可选的enter:function(el,done){//...done()},
